<template>
    <div>
        <!-- 标题和筛选 -->
        <section class="title-choose flex bg_colorff flex-pack-justify flex-align-center m_b20">
            <span class="font_size32 font-bold">{{chooseItem}}</span>
            <div class="flex flex-align-center" @click="chooseFriType">
                <span class="color_66 font_size28">筛选</span>
                <img
                    src="../../assets/img/icon/jiantou_down.png"
                    alt=""
                    class="choose-img"
                    :style="isShowChooseList?'transform:rotate(180deg)':''"
                >
            </div>
        </section>
        <!-- 订单列表 -->
        <div style="overflow:scroll">
            <mt-loadmore
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                ref="loadmore"
                :bottomDistance="bottomDistance"
            >
                <ul>
                    <li class="order-list-item bg_colorff m_b20" v-for="item in orderListArr">
                        <!-- 商品名称 -->
                        <div class="flex flex-pack-justify flex-align-center">
                            <span
                                class="font_size28 color_33 font-bold pro-title"
                            >商品名称:{{item.goods_name}}</span>
                            <img
                                src="../../assets/img/icon/jiantou_left.png"
                                alt=""
                                class="arrow-right"
                                @click="jumpToProDetail(item.goods_id)"
                            >
                        </div>
                        <!-- 价格、订单状态 -->
                        <div class="flex flex-pack-justify flex-align-center price-status">
                            <span
                                class="font_size28 color_33 font-bold"
                            >￥{{Number(item.price).toFixed(2)}}</span>
                            <span
                                class="font_size28 color_fc"
                            >{{item.status == 3?'已付款':orderStatus[item.status]}}</span>
                        </div>
                        <!-- 订单编号、下单时间、数量、总价 -->
                        <div class="time-count-total font_size24 color_99 flex">
                            <div class="time-count-txt">
                                <p>订单号</p>
                                <p>下单时间</p>
                                <p>购买数量</p>
                                <p>商品总价</p>
                            </div>
                            <div>
                                <p>{{item.order_sn}}</p>
                                <p>{{item.create_time}}</p>
                                <p>X{{item.goods_num}}</p>
                                <p>
                                    <span class="color_fc">￥{{item.price}}</span>
                                </p>
                            </div>
                        </div>
                        <!-- 底部订单状态 -->
                        <div class="font_size20 color_33 bottom-height bg_colorff">
                            <!-- 待付款 -->
                            <div class="flex flex-pack-justify flex-align-center public-height" v-if="item.status == 0"
                            >
                                <p v-if="item.close_order_time">{{item.close_order_time}}后订单关闭，请尽快付款</p>
                                <span v-if="item.close_order_time" class="color_0d font_size24 public-btn t_center" @click="jumpToPay">付款</span>
                            </div>
                            <!-- 已付款待评价 -->
                            <div class="flex flex-end flex-align-center public-height" v-if="item.status == 1">
                                <span class="color_0d font_size24 public-btn t_center" @click="jumpToEvaluate(item.goods_name,item.order_sn,item.create_time,item.price,item.goods_num,item.goods_id,1)">评价</span>
                            </div>
                            <!-- 已关闭 -->
                            <div class="flex flex-align-center public-height" v-if="item.status == 2"><p>{{closeTips}}</p></div>
                            <!-- 查看评价 -->
                            <div class="flex flex-end flex-align-center public-height" v-if="item.status == 3">
                                <div @click="jumpToEvaluate(item.order_sn,2)">
                                    <span class="color_0d font_size24">我的评价</span>
                                    <img src="../../assets/img/icon/jiantou_left.png" alt="" class="arrow-right my-evaluate-arr">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </mt-loadmore>
        </div>
        <!-- 选择列表弹窗 -->
        <section class="shade" v-if="isShowChooseList" @click="clickShade()">
            <ul class="choose-list-ul bg_colorff">
                <li
                    class="choose-list-item font_size32 color_33 font-bold"
                    v-for="item in chooseList"
                    @click="chooseListFuc(item)"
                >{{item}}</li>
            </ul>
        </section>
    </div>
</template>

<script>
export default {
  data() {
    return {
      chooseItem: "全部订单", //选择项
      isShowChooseList: false, //是否显示下拉选项框
      chooseList: ["全部订单", "待付款", "已付款", "已关闭"], //下拉框列表
      closeTips: "付款时间已过，请重新下单", //订单关闭状态下的提示
      orderListArr: [], //订单列表
      pagesNum: 1, //当前页数
      maxPageNum: 0, //最大页数
      allLoaded: false, //是否宣布加载完
      bottomDistance: 120, //触发上拉加载的阈值
      orderStatus: ["待付款", "已付款", "已关闭"] //订单状态
    };
  },

  mounted() {
    this.getPageData(9, false);
  },

  methods: {
    //获取数据
    getPageData(type = 9, isScroll = true) {
      if (isScroll) {
        if (this.pagesNum >= this.maxPageNum) {
          this.pagesNum = this.maxPageNum;
          this.allLoaded = true;
          this.$toast("无更多数据");
          return;
        } else {
          this.pagesNum++;
        }
      } else {
        this.pagesNum = 1;
      }
      this.$util
        .get("user/getUserOrderList", {
          uid: this.$store.state.userinfo.uid,
          page: this.pagesNum,
          type: type
        })
        .then(res => {
          this.maxPageNum = res.data.last_page;
          this.orderListArr = res.data.data.concat(this.orderListArr);
        });
    },
    //点击筛选
    chooseFriType() {
      this.isShowChooseList = !this.isShowChooseList;
    },
    //点击跳转商品详情页
    jumpToProDetail(pID) {
      this.$router.push(`/details/${pID}`);
    },
    //点击类型列表
    chooseListFuc(txt) {
      let type;
      this.chooseItem = txt;
      switch (txt) {
        case "全部订单":
          type = 9;
          break;
        case "待付款":
          type = 0;
          break;
        case "已付款":
          type = 1;
          break;
        case "已关闭":
          type = 2;
          break;

        default:
          break;
      }
      this.getPageData(type, false);
    },
    //点击遮罩
    clickShade() {
      this.isShowChooseList = false;
    },
    //点击付款
    jumpToPay() {
      if (this.$store.state.userinfo.uid) {
        //跳转支付页面
      } else {
        //跳转登录页面
      }
    },
    //点击去评价
    jumpToEvaluate(name,orderID,time,price,num,id, type) {
      var info = {
        goods_name: name,
        goods_id: id,
        price: price,
        ordernum: orderID,
        timer: time,
        goods_num: num,
        allprice: price
      }
      this.$router.push({
        path: "evaluateinfo",
        query: { info: info, type: type }
      });

    },
    // 上拉加载
    loadBottom() {
      this.getPageData(); // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/center/order.less);
</style>
